<template>
  <view class="tech-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">科技研究</text>
      <text class="page-subtitle">解锁新的技术和能力</text>
    </view>
    
    <!-- 研究点显示 -->
    <view class="research-points">
      <view class="points-item">
        <text class="points-icon">🔬</text>
        <text class="points-label">研究点</text>
        <text class="points-value">{{ researchPoints }}</text>
      </view>
      <view class="points-item">
        <text class="points-icon">⚡</text>
        <text class="points-label">研究速度</text>
        <text class="points-value">{{ researchSpeed }}/小时</text>
      </view>
    </view>
    
    <!-- 科技分类 -->
    <view class="tech-tabs">
      <view 
        class="tech-tab" 
        :class="{active: techCategory === 'all'}"
        @click="setTechCategory('all')"
      >
        <text>全部</text>
      </view>
      <view 
        class="tech-tab" 
        :class="{active: techCategory === 'production'}"
        @click="setTechCategory('production')"
      >
        <text>生产</text>
      </view>
      <view 
        class="tech-tab" 
        :class="{active: techCategory === 'survival'}"
        @click="setTechCategory('survival')"
      >
        <text>生存</text>
      </view>
      <view 
        class="tech-tab" 
        :class="{active: techCategory === 'advanced'}"
        @click="setTechCategory('advanced')"
      >
        <text>高级</text>
      </view>
    </view>
    
    <!-- 科技树 -->
    <view class="tech-tree">
      <view 
        class="tech-card" 
        v-for="tech in filteredTechs" 
        :key="tech.id"
        @click="selectTech(tech)"
        :class="{
          available: tech.available,
          researching: tech.researching,
          completed: tech.completed,
          locked: tech.locked,
          selected: selectedTech === tech.id
        }"
      >
        <view class="tech-header">
          <text class="tech-icon">{{ tech.icon }}</text>
          <view class="tech-info">
            <text class="tech-name">{{ tech.name }}</text>
            <text class="tech-level">等级 {{ tech.level }}</text>
          </view>
          <view class="tech-status">
            <text class="status-text" v-if="tech.completed">已完成</text>
            <text class="status-text researching" v-else-if="tech.researching">研究中</text>
            <text class="status-text available" v-else-if="tech.available">可研究</text>
            <text class="status-text locked" v-else>未解锁</text>
          </view>
        </view>
        
        <text class="tech-description">{{ tech.description }}</text>
        
        <view class="tech-stats">
          <view class="stat-row" v-if="tech.cost">
            <text class="stat-label">研究成本:</text>
            <text class="stat-value">{{ tech.cost }}</text>
          </view>
          <view class="stat-row" v-if="tech.time">
            <text class="stat-label">研究时间:</text>
            <text class="stat-value">{{ tech.time }}</text>
          </view>
        </view>
        
        <view class="tech-actions">
          <button 
            v-if="tech.available && !tech.researching && !tech.completed" 
            class="research-btn" 
            @click.stop="startResearch(tech)"
            :disabled="!canResearch(tech)"
          >
            开始研究
          </button>
          <button 
            v-if="tech.researching" 
            class="researching-btn" 
            @click.stop="cancelResearch(tech)"
          >
            取消研究
          </button>
        </view>
      </view>
    </view>
    
    <!-- 科技详情 -->
    <view class="tech-details" v-if="selectedTechInfo">
      <view class="detail-header">
        <text class="detail-icon">{{ selectedTechInfo.icon }}</text>
        <view class="detail-info">
          <text class="detail-name">{{ selectedTechInfo.name }}</text>
          <text class="detail-level">等级 {{ selectedTechInfo.level }}</text>
        </view>
      </view>
      <view class="detail-content">
        <text class="detail-description">{{ selectedTechInfo.description }}</text>
        <view class="detail-effects">
          <text class="effects-title">科技效果:</text>
          <view class="effect-item" v-for="effect in selectedTechInfo.effects" :key="effect.type">
            <text class="effect-type">{{ effect.type }}:</text>
            <text class="effect-value">{{ effect.value }}</text>
          </view>
        </view>
        <view class="detail-requirements">
          <text class="requirements-title">研究需求:</text>
          <view class="requirement-item" v-for="req in selectedTechInfo.requirements" :key="req.type">
            <text class="requirement-type">{{ req.type }}:</text>
            <text class="requirement-amount">{{ req.amount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TechPage',
  props: {
    techs: {
      type: Array,
      default: () => []
    },
    researchPoints: {
      type: Number,
      default: 100
    },
    researchSpeed: {
      type: Number,
      default: 10
    },
    techCategory: {
      type: String,
      default: 'all'
    },
    selectedTech: {
      type: String,
      default: null
    },
    selectedTechInfo: {
      type: Object,
      default: null
    }
  },
  
  computed: {
    filteredTechs() {
      if (this.techCategory === 'all') {
        return this.techs
      }
      return this.techs.filter(tech => tech.category === this.techCategory)
    }
  },
  
  methods: {
    setTechCategory(category) {
      this.$emit('set-tech-category', category)
    },
    
    selectTech(tech) {
      this.$emit('select-tech', tech)
    },
    
    canResearch(tech) {
      return tech.available && this.researchPoints >= 50
    },
    
    startResearch(tech) {
      this.$emit('start-research', tech)
    },
    
    cancelResearch(tech) {
      this.$emit('cancel-research', tech)
    }
  }
}
</script>

<style scoped>
.tech-page {
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.research-points {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  background: white;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.points-item {
  text-align: center;
}

.points-icon {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.points-label {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-bottom: 4rpx;
}

.points-value {
  font-size: 24rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.tech-tabs {
  display: flex;
  margin-bottom: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.tech-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.tech-tab.active {
  background: #667eea;
  color: white;
}

.tech-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.tech-card {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tech-card.selected {
  border: 2rpx solid #667eea;
}

.tech-card.available {
  border-left: 4rpx solid #27ae60;
}

.tech-card.researching {
  border-left: 4rpx solid #f39c12;
}

.tech-card.completed {
  border-left: 4rpx solid #3498db;
}

.tech-card.locked {
  opacity: 0.6;
  border-left: 4rpx solid #95a5a6;
}

.tech-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.tech-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.tech-info {
  flex: 1;
}

.tech-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.tech-level {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}

.tech-status {
  margin-left: auto;
}

.status-text {
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  color: white;
}

.status-text.available {
  background: #27ae60;
}

.status-text.researching {
  background: #f39c12;
}

.status-text.completed {
  background: #3498db;
}

.status-text.locked {
  background: #95a5a6;
}

.tech-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.tech-stats {
  margin-bottom: 16rpx;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 20rpx;
  color: #666;
}

.stat-value {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}

.tech-actions {
  display: flex;
  gap: 12rpx;
}

.research-btn, .researching-btn {
  flex: 1;
  padding: 12rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.research-btn {
  background: #27ae60;
  color: white;
}

.research-btn:disabled {
  background: #bdc3c7;
  color: #7f8c8d;
}

.researching-btn {
  background: #e74c3c;
  color: white;
}

.tech-details {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.detail-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.detail-info {
  flex: 1;
}

.detail-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.detail-level {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}

.detail-content {
  margin-top: 16rpx;
}

.detail-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.detail-effects {
  margin-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.effects-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.effect-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.effect-type {
  font-size: 20rpx;
  color: #666;
}

.effect-value {
  font-size: 20rpx;
  color: #27ae60;
  font-weight: bold;
}

.detail-requirements {
  margin-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.requirements-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.requirement-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.requirement-type {
  font-size: 20rpx;
  color: #666;
}

.requirement-amount {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}
</style>
